<template>
	<xbd-pages-content title="考勤管理">
		<template #content>
			<view class="work-attendance">
				<view class="work-info">
					<v-tabs
						v-model="current"
						:tabs="tabs"
						@change="changeTab"
						pills
						paddingItem="0 106rpx"
						v-if="userInfo.user_role === 'leader'"
					></v-tabs>
					<view class="card" v-if="current === 0">
						<xbd-card title="上班" isBlue>
							<template #default>
								<view class="time">
									<text>{{ startTime || '未打卡' }}</text>
									<image v-if="startTime" class="complete" src="@/static/images/common/complete.svg" mode=""></image>
								</view>
							</template>
						</xbd-card>
						<xbd-card title="下班" :isBlue="false">
							<template #default>
								<view class="time">
									<text>{{ endTime || '未打卡' }}</text>
									<image v-if="endTime" class="complete" src="@/static/images/common/complete.svg" mode=""></image>
								</view>
							</template>
						</xbd-card>
					</view>
					<view class="card" v-else>
						<xbd-card title="应出勤" isBlue :num="theory">
						</xbd-card>
						<xbd-card title="今日出勤" :isBlue="false" :num="actual">
						</xbd-card>
					</view>
				</view>
				<view class="center" v-if="current === 1">
					<view class="card" @click="clickStaff">
						查看员工考勤
					</view>
				</view>
				<view class="attendance-info" v-if="current === 0">
					<xbd-title :title="month + '月汇总'">
						<template #default>
							<uni-icons type="arrowthinright" size="14" color="#394954" @click.native="clickStatistics"></uni-icons>
						</template>
					</xbd-title>
					<!-- 月汇总信息 -->
					<view class="month-info">
						<view class="box">
							<view class="num">
								{{ summary.averageDuration }}
							</view>
							<view class="title">
								平均工时(小时)
							</view>
						</view>
						<view class="box">
							<view class="num">
								{{ summary.late }}
							</view>
							<view class="title">
								迟到(次)
							</view>
						</view>
						<view class="box">
							<view class="num">
								{{ summary.leaveEarly }}
							</view>
							<view class="title">
								早退(次)
							</view>
						</view>
					</view>
					<xbd-title title="9月汇总">
						<template #title>
								每日记录<text class="text">({{ month }}月)</text>
						</template>
					</xbd-title>
					<zzx-calendar :dotList="markDays" @avtive-month="avtiveMonth" @selected-change="selectedChange"></zzx-calendar>
					<view class="abnormal-card" v-if="abnormalCardImg.src">
						<view class="left">
							<image class="img" :src="abnormalCardImg.src" mode=""></image>
							{{ abnormalCardImg.name }}
						</view> 
					</view>
					<uni-steps
						v-if="activeInfo.status !== 2"
						active-color="#999"
						direction="column"
						:options="[{title: '上班  ' + (activeInfo.startTime || '未打卡')}, {title: '下班  ' + (activeInfo.endTime || '未打卡')}]"
						:active="2"
					></uni-steps>
				</view>
				<view class="visualization" v-else>
					<xbd-date :date.sync="date"></xbd-date>
					<xbd-title title="出勤趋势"></xbd-title>
					<view class="charts1">
						<chart-super-twoline-area :chart-data="attendanceTrends"></chart-super-twoline-area>
					</view>
					<xbd-title title="各单位出勤情况"></xbd-title>
					<view class="charts1">
						<chart-super-twobar :chart-data="attendance"></chart-super-twobar>
					</view>
					<xbd-title title="员工出勤时长分析"></xbd-title>
					<view class="charts2">
						<chart-radar :chart-data="attendanceDurationAnalysis"></chart-radar>
					</view>
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { mapState } from 'vuex';
	const dayjs = require('dayjs');
	const date = dayjs(new Date()).format('YYYY-MM'); // '25/01/2019'
	export default {
		data() {
			return {
				current: 0,
				tabs: ['我的考勤', '全部考勤'],
				startTime: '09:22',
				endTime: '',
				theory: 231,
				actual: 211,
				date: date,
				summary: {
					averageDuration: 8,
					late: 0,
					leaveEarly: 0
				},
				markDays:[{date: "2021-10-11", status: 0}, {date: "2021-10-12", status: 1}, {date: "2021-10-13", status: 4}],
				month: 0,
				activeInfo: {
					status: 1,
					startTime: '09:22',
					endTime: '21:33'
				},
				attendanceTrends: {
					name: ['应出勤', '实际出勤'],
					x: 'time',
					unit: ['人', '人'],
					y: ['theoryNum', 'actualNum'],
					color: ['#457aff', '#222222'],
					data: [
						{ time: "09-14", theoryNum: 220, actualNum: 219 },
						{ time: "09-15", theoryNum: 188, actualNum: 209 },
						{ time: "09-16", theoryNum: 211, actualNum: 159 },
						{ time: "09-17", theoryNum: 257, actualNum: 199 },
						{ time: "09-18", theoryNum: 228, actualNum: 200 }
					]
				},
				attendance: {
					name: ['应出勤', '实际出勤'],
					x: 'name',
					unit: ['人', '人'],
					y: ['theoryNum', 'actualNum'],
					color: ['#457aff', '#222222'],
					data: [
						{ name: "总经办", theoryNum: 220, actualNum: 219 },
						{ name: "信息中心", theoryNum: 188, actualNum: 209 },
						{ name: "财务部", theoryNum: 211, actualNum: 159 },
						{ name: "人力资源", theoryNum: 257, actualNum: 199 },
						{ name: "其他", theoryNum: 228, actualNum: 200 },
						{ name: "总经办1", theoryNum: 220, actualNum: 219 },
						{ name: "信息中心1", theoryNum: 188, actualNum: 209 },
						{ name: "财务部1", theoryNum: 211, actualNum: 159 },
						{ name: "人力资源1", theoryNum: 257, actualNum: 199 },
						{ name: "其他1", theoryNum: 228, actualNum: 200 },
						{ name: "总经办2", theoryNum: 220, actualNum: 219 },
						{ name: "信息中心2", theoryNum: 188, actualNum: 209 },
						{ name: "财务部2", theoryNum: 211, actualNum: 159 },
						{ name: "人力资源2", theoryNum: 257, actualNum: 199 },
						{ name: "其他2", theoryNum: 228, actualNum: 200 },
						{ name: "总经办3", theoryNum: 220, actualNum: 219 },
						{ name: "信息中心3", theoryNum: 188, actualNum: 209 },
						{ name: "财务部3", theoryNum: 211, actualNum: 159 },
						{ name: "人力资源3", theoryNum: 257, actualNum: 199 },
						{ name: "其他3", theoryNum: 228, actualNum: 200 },
						{ name: "总经办4", theoryNum: 220, actualNum: 219 },
						{ name: "信息中心4", theoryNum: 188, actualNum: 209 },
						{ name: "财务部4", theoryNum: 211, actualNum: 159 },
						{ name: "人力资源4", theoryNum: 257, actualNum: 199 },
						{ name: "其他4", theoryNum: 228, actualNum: 200 }
					]
				},
				attendanceDurationAnalysis: {
					color: '#ff7543',
					x: 'time',
					y: 'num',
					unit: '人',
					width: 360,
					height: 225,
					data: [
					  { time: "60小时以下", num: 7 },
					  { time: "60-120小时", num: 6 },
					  { time: "120-180小时", num: 8 },
					  { time: "180-240小时", num: 10 },
					  { time: "240小时以上", num: 9 }
					]
				}
			};
		},
		computed: {
			...mapState(['userInfo']),
			abnormalCardImg() {
				const info = {};
				if (this.activeInfo.status === 0) {
					info.src = require('@/static/images/workattendance/yc.svg');
					info.name = '异常';
				} else if (this.activeInfo.status === 1) {
					info.src = require('@/static/images/workattendance/cc.svg');
					info.name = '出差';
				} else if (this.activeInfo.status === 2) {
					info.src = require('@/static/images/workattendance/xx.svg');
					info.name = '休息';
				} else if (this.activeInfo.status === 3) {
					info.src = require('@/static/images/workattendance/qj.svg');
					info.name = '请假';
				} else {
					info.src = '';
					info.name = '正常上班';
				}
				return info;
			}
		},
		methods: {
			changeTab(inx) {
				console.log(inx);
			},
			// 选中日期
			selectedChange(item) {
				console.log(item);
			},
			// 月份改变
			avtiveMonth(item) {
				this.month = item;
			},
			clickStatistics() {
				uni.navigateTo({
					url: './attendancestatistics',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickStaff() {
				uni.navigateTo({
					url: './staffstatistics',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-steps__column-title {
		color: $uni-text-color !important;
	}
	::v-deep .uni-steps__column-text {
		border: none;
	}
	.work-attendance {
		.work-info {
			.v-tabs {
				margin-bottom: 10px;
			}
			padding: 20px 50rpx;
			margin-bottom: 5px;
			
			background-color: #FFFFFF;
			.card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time {
					display: flex;
					align-items: center;
					
					font-size: 16px;
					
					color: #FFFFFF;
					.complete {
						margin-left: 10rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
		.attendance-info {
			padding: 20px 50rpx;
			
			background-color: #FFFFFF;
			.xbd-title {
				margin-bottom: 20px;
			}
			.month-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				margin-bottom: 20px;
				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					.num {
						margin-bottom: 10px;
						font-size: 24px;
						
						color: #101010; 
					}
					.title {
						font-size: 14px;
						
						color: #999999;
					}
				}
			}
			.text {
				margin-left: 30rpx;
				
				font-size: 14px;
				
				color: #999999;
			}
			.zzx-calendar {
				margin-bottom: 20px;
			}
			.abnormal-card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				height: 32px;
				padding: 0 30rpx;
				border-radius: 8rpx;
				border: 1px solid #F8F8F8;
				margin-bottom: 20px;
				
				font-size: 14px;
				
				background-color: #FFFFFF;
				color: $uni-text-color;
				.left {
					display: flex;
					align-items: center;
					.img {
						width: 34rpx;
						height: 34rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
		.center {
			padding: 10px 50rpx;
			margin-bottom: 5px;
			
			background-color: #FFFFFF;
			.card {
				height: 32px;
				line-height: 32px;
				text-align: center;
				border-radius: 12rpx;
				
				color: #FFFFFF;
				
				background: url(../../static/images/common/orangebg.png) no-repeat;
				background-size: 650rpx 32px;
			}
		}
		.visualization {
			padding: 20px 50rpx;
			
			background-color: #FFFFFF;
			.xbd-date, .xbd-title {
				margin-bottom: 20px;
			}
			.charts1 {
				width: 720rpx;
				height: 180px;
				margin-left: -35rpx;
				
				box-sizing: border-box;
			}
			.charts2 {
				width: 720rpx;
				height: 225px;
				margin-left: -35rpx;
				
				box-sizing: border-box;
			}
		}
	}
</style>
